<template>
  <el-scrollbar class="classify_sc">
    <div class="home_nav">
      <el-row class="tac">
        <el-col :span="24">
          <h5 class="nav_title">选择分区</h5>
          <el-menu :default-active="1" @select="handleSelect">
            <el-menu-item v-for="menuItem in menuItems" :index="menuItem.id">
              <img class="classify_img" :src="menuItem.icon" alt="">
              <span>{{menuItem.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>

    <div class="classify_content">
      <div v-for="item in menuItems">
        <productList
            v-if="item.id === currentIndex"
            :listTitle="item.name"
            :param="{ productCategoryId: item.id }"
        />
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {ref} from "vue";
import productList from "@/components/product/productList.vue";
import {listCategory} from "@/apis/category.js";


const currentIndex = ref(1)

const menuItems = ref([])

const handleSelect = (index) => {
  currentIndex.value = index
}

const getData = async () => {
  listCategory().then(res => {
    menuItems.value.push(...res.rows)
  })
}

getData()
</script>

<style scoped>
.classify_sc{
  height: 92vh;
  width: 100%;
}
.home_nav{
  min-height: 92vh;
  width: 30vh;
  padding: 2vh 0 0 3vh;
  margin: 0;
  position: fixed;
  background-color: #ffffff;
}
.nav_title{
  font-size: 3vh;
  margin: 1vh 0 1vh 2vh ;
}

.classify_content{
  position: relative;
  top: 2vh;
  left: 33vh;
  min-height: 90vh;
  width: 165vh;
}
.classify_img{
  height: 24px;
  width: 24px;
}
</style>
